<script setup>
import Copypage from '@/components/table/copypage.vue'
import { timeAgo, utcTime } from '@/utils/util'


const props = defineProps({
    address: String,
    addList: Array
});

</script>

<template>
    <div class="table">
        <div>
            <el-table :data="addList" style="width: 100%">
                <el-table-column label="Txn Hash" min-width="120">
                    <template #default="scope">
                        <Copypage :id="scope.row.Hash" :type="1" />
                    </template>
                </el-table-column>
                <el-table-column label="Block" min-width="70">
                    <template #default="scope">
                        <p><router-link :to="'/block/' + scope.row.BlockNumber">{{ scope.row.BlockNumber }}</router-link>
                        </p>

                    </template>
                </el-table-column>
                <el-table-column prop="ts" label="Age" min-width="100">
                    <template #default="scope">
                        <el-tooltip class="item" effect="dark" :hide-after="0" :content="utcTime(scope.row.Ts)"
                            placement="top">
                            <span>{{ timeAgo(scope.row.Ts) }}</span>
                        </el-tooltip>

                    </template>
                </el-table-column>
                <el-table-column label="Method" min-width="130">
                    <template #default="scope">
                        <div class="t_hash">
                            <el-tooltip class="item" effect="dark" :hide-after="0" content="MethodID" placement="top">
                                <p class="Method_p">{{ scope.row.Method }}</p>
                            </el-tooltip>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column label="Logs" min-width="580">
                    <template #default="scope">
                        <div class="logs">
                            <p v-if="scope.row.Topic0 != ''" style="color:#77838f">[topic0] {{ scope.row.Topic0 }}</p>
                            <p v-if="scope.row.Topic1 != ''">[topic1] {{ scope.row.Topic1 }}</p>
                            <p v-if="scope.row.Topic2 != ''">[topic2] {{ scope.row.Topic2 }}</p>
                            <p v-if="scope.row.Topic3 != ''">[topic3] {{ scope.row.Topic3 }}</p>

                            <p v-if="scope.row.Data != ''">Hex ➡ <span style="color:#e6a23c">{{ scope.row.Data
                            }}</span></p>
                        </div>

                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
</template>

<style lang="less">
.logs p {
    font-size: 13px;
    margin-bottom: 5px;
}

.Method_p {
    border-radius: 0.4rem;
    min-width: 100px;
    font-size: 0.75rem;
    padding: 0.1rem 0;
    background: rgba(52, 152, 219, 0.1);
    border: 1px solid transparent;
    text-align: center;
}
</style>